<template>
    <div>
      <!-- 输入框用于输入需要转换为二维码的内容 -->
      <input v-model="dynamicUrl" placeholder="请输入H5页面的URL或动态内容">
      
      <!-- 按钮点击后生成二维码 -->
      <button @click="generateQRCode">生成二维码</button>
  
      <!-- 显示生成的二维码 -->
      <div v-if="qrCodeImage" class="qrcode">
        <img :src="qrCodeImage" alt="QR Code">
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import QRCode from 'qrcode';
  
  // 定义响应式变量
  const dynamicUrl = ref(''); // 用户输入的动态URL或内容
  const qrCodeImage = ref(''); // 存储生成的二维码图片
  
  // 生成二维码的方法
  const generateQRCode = async () => {
    if (!dynamicUrl.value) {
      alert('请输入有效的URL或内容');
      return;
    }
    try {
      // 使用 qrcode 生成二维码，并将其转换为DataURL格式
      qrCodeImage.value = await QRCode.toDataURL(dynamicUrl.value);
    } catch (error) {
      console.error('生成二维码时发生错误:', error);
    }
  };
  </script>
  
  <style scoped>
  .qrcode img {
    width: 200px;
    height: 200px;
  }
  </style>